<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>无人机系统注册</title>
    <link rel="stylesheet" th:href="@{/css/register.css}">
</head>
<body>
    <div class="register-container">
        <div class="register-form">
            <h2>无人机系统注册</h2>
            <form id="registerForm">
                <!-- 用户类型选择 -->
                <div class="form-group">
                    <label>用户类型 *</label>
                    <div class="radio-group">
                        <label class="radio-item">
                            <input type="radio" name="userType" value="1" required>
                            <span>飞手</span>
                        </label>
                        <label class="radio-item">
                            <input type="radio" name="userType" value="2" required>
                            <span>组织方</span>
                        </label>
                    </div>
                </div>

                <!-- 基本信息 -->
                <div class="form-group">
                    <label for="userName">用户名 *</label>
                    <input type="text" id="userName" name="userName" required>
                    <small>4-20位字母、数字、下划线</small>
                </div>

                <div class="form-group">
                    <label for="password">密码 *</label>
                    <input type="password" id="password" name="password" required>
                    <small>8-20位，包含大小写字母和数字</small>
                </div>

                <div class="form-group">
                    <label for="confirmPassword">确认密码 *</label>
                    <input type="password" id="confirmPassword" name="confirmPassword" required>
                </div>

                <div class="form-group">
                    <label for="realName">真实姓名 *</label>
                    <input type="text" id="realName" name="realName" required>
                </div>

                <div class="form-group">
                    <label for="idCard">身份证号 *</label>
                    <input type="text" id="idCard" name="idCard" required>
                </div>

                <div class="form-group">
                    <label for="idCardFront">身份证正面照片 *</label>
                    <div class="photo-upload">
                        <input type="file" id="idCardFront" name="idCardFront" accept="image/*" class="photo-input">
                        <div class="photo-preview" id="idCardFront-preview"></div>
                        <button type="button" class="btn-upload" onclick="document.getElementById('idCardFront').click()">
                            选择照片
                        </button>
                    </div>
                </div>

                <div class="form-group">
                    <label for="idCardBack">身份证反面照片 *</label>
                    <div class="photo-upload">
                        <input type="file" id="idCardBack" name="idCardBack" accept="image/*" class="photo-input">
                        <div class="photo-preview" id="idCardBack-preview"></div>
                        <button type="button" class="btn-upload" onclick="document.getElementById('idCardBack').click()">
                            选择照片
                        </button>
                    </div>
                </div>

                <div class="form-group">
                    <label for="phone">手机号码 *</label>
                    <input type="tel" id="phone" name="phone" required>
                </div>

                <div class="form-group">
                    <label for="email">邮箱</label>
                    <input type="email" id="email" name="email">
                </div>

                <div class="form-group">
                    <label for="address">地址</label>
                    <input type="text" id="address" name="address">
                </div>

                <div class="form-group">
                    <label for="emergencyContact">紧急联系人 *</label>
                    <input type="text" id="emergencyContact" name="emergencyContact" required>
                </div>

                <div class="form-group">
                    <label for="emergencyPhone">紧急联系人电话 *</label>
                    <input type="tel" id="emergencyPhone" name="emergencyPhone" required>
                </div>

                <div class="form-group">
                    <label for="explorationInfo">探险信息照片 *</label>
                    <div class="photo-upload">
                        <input type="file" id="explorationInfo" name="explorationInfo" accept="image/*" class="photo-input">
                        <div class="photo-preview" id="explorationInfo-preview"></div>
                        <button type="button" class="btn-upload" onclick="document.getElementById('explorationInfo').click()">
                            选择照片
                        </button>
                    </div>
                </div>

                <div class="form-group">
                    <label for="qualification">个人资质照片 *</label>
                    <div class="photo-upload">
                        <input type="file" id="qualification" name="qualification" accept="image/*" class="photo-input">
                        <div class="photo-preview" id="qualification-preview"></div>
                        <button type="button" class="btn-upload" onclick="document.getElementById('qualification').click()">
                            选择照片
                        </button>
                    </div>
                </div>

                <!-- 组织方特有字段 -->
                <div id="organizationFields" class="organization-fields" style="display: none;">
                    <h3>组织信息</h3>
                    <div class="form-group">
                        <label for="orgName">组织名称 *</label>
                        <input type="text" id="orgName" name="orgName">
                    </div>
                    <div class="form-group">
                        <label for="orgType">组织类型 *</label>
                        <select id="orgType" name="orgType">
                            <option value="">请选择</option>
                            <option value="ENTERPRISE">企业</option>
                            <option value="GOVERNMENT">政府</option>
                            <option value="INDIVIDUAL">个人</option>
                            <option value="OTHER">其他</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="legalPerson">法人代表</label>
                        <input type="text" id="legalPerson" name="legalPerson">
                    </div>
                    <div class="form-group">
                        <label for="businessLicense">营业执照号</label>
                        <input type="text" id="businessLicense" name="businessLicense">
                    </div>
                    <div class="form-group">
                        <label for="contactPerson">联系人 *</label>
                        <input type="text" id="contactPerson" name="contactPerson">
                    </div>
                    <div class="form-group">
                        <label for="contactEmail">联系邮箱</label>
                        <input type="email" id="contactEmail" name="contactEmail">
                    </div>
                    <div class="form-group">
                        <label for="description">组织描述</label>
                        <textarea id="description" name="description" rows="3"></textarea>
                    </div>
                </div>

                <!-- 飞手特有字段 -->
                <div id="pilotFields" class="pilot-fields" style="display: none;">
                    <h3>技能信息</h3>
                    <div id="skillsContainer">
                        <div class="skill-item">
                            <div class="form-group">
                                <label>技能名称 *</label>
                                <input type="text" name="skills[0].skillName" required>
                            </div>
                            <div class="form-group">
                                <label>技能等级</label>
                                <select name="skills[0].skillLevel">
                                    <option value="">请选择</option>
                                    <option value="初级">初级</option>
                                    <option value="中级">中级</option>
                                    <option value="高级">高级</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label>经验年限 *</label>
                                <input type="number" name="skills[0].experienceYears" min="0" max="50" required>
                            </div>
                            <div class="form-group">
                                <label>技能描述</label>
                                <textarea name="skills[0].description" rows="2"></textarea>
                            </div>
                            <button type="button" class="btn-remove" onclick="removeSkill(this)">删除</button>
                        </div>
                    </div>
                    <button type="button" class="btn-add" onclick="addSkill()">添加技能</button>

                    <h3>证书信息</h3>
                    <div id="certificatesContainer">
                        <div class="certificate-item">
                            <div class="form-group">
                                <label>证书名称 *</label>
                                <input type="text" name="certificates[0].certName" required>
                            </div>
                            <div class="form-group">
                                <label>证书编号 *</label>
                                <input type="text" name="certificates[0].certNumber" required>
                            </div>
                            <div class="form-group">
                                <label>证书类型 *</label>
                                <select name="certificates[0].certType" required>
                                    <option value="">请选择</option>
                                    <option value="AOPA">AOPA</option>
                                    <option value="UTC">UTC</option>
                                    <option value="ASFC">ASFC</option>
                                    <option value="OTHER">其他</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label>证书等级</label>
                                <input type="text" name="certificates[0].certLevel">
                            </div>
                            <div class="form-group">
                                <label>发证日期 *</label>
                                <input type="date" name="certificates[0].issueDate" required>
                            </div>
                            <div class="form-group">
                                <label>过期日期 *</label>
                                <input type="date" name="certificates[0].expireDate" required>
                            </div>
                            <div class="form-group">
                                <label>证书图片 *</label>
                                <input type="file" name="certificates[0].certImage" accept="image/*" required>
                            </div>
                            <button type="button" class="btn-remove" onclick="removeCertificate(this)">删除</button>
                        </div>
                    </div>
                    <button type="button" class="btn-add" onclick="addCertificate()">添加证书</button>
                </div>

                <!-- 验证码 -->
                <div class="form-group">
                    <label for="captcha">验证码 *</label>
                    <div class="captcha-group">
                        <input type="text" id="captcha" name="captcha" required>
                        <img id="captchaImg" th:src="@{/captchaImage}" onclick="refreshCaptcha()" alt="验证码">
                    </div>
                </div>

                <div class="form-group">
                    <button type="submit" class="btn-submit">注册</button>
                    <button type="button" class="btn-reset" onclick="resetForm()">重置</button>
                </div>
            </form>
        </div>
    </div>

    <script th:src="@{/js/register.js}"></script>
</body>
</html>
